<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="616px"
      :title="operateType == 0 ? '新增' : '编辑'"
      wrapClassName="add-modal-container"
      @cancel="closeModal()"
    >
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <!-- 角色名称 -->
        <a-form-model-item ref="roleName" label="角色名称" prop="roleName">
          <a-input v-model="form.roleName" placeholder="请输入角色名称" />
        </a-form-model-item>
        <!-- 权限字符 -->
        <a-form-model-item ref="character" label="权限字符" prop="character">
          <a-input v-model="form.character" placeholder="请输入权限字符" />
        </a-form-model-item>
        <!-- 角色顺序 -->
        <a-form-model-item ref="roleIndex" label="角色顺序" prop="roleIndex">
          <a-input
            v-model="form.roleIndex"
            type="number"
            placeholder="请输入角色顺序"
          />
        </a-form-model-item>
        <!-- 角色类型 -->
        <a-form-model-item ref="roleType" label="角色类型" prop="roleType">
          <a-select
            v-model="form.roleType"
            placeholder="请输入角色类型"
            :loading="roleTypeLoading"
          >
            <a-select-option
              :value="item.dicValue"
              v-for="item in form.roleTypeSource"
              :key="item.dicValue"
            >
              {{ item.dicDesc }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- 备注 -->
        <a-form-model-item ref="mark" label="备注" prop="mark">
          <a-input
            v-model="form.mark"
            placeholder="请输入备注"
            type="textarea"
            style="height: 100px"
          />
        </a-form-model-item>
      </a-form-model>
      <div class="form-footer flex">
        <a-button type="default" @click="closeModal()">取消 </a-button>
        <a-button type="primary" :loading="loading" @click="submit()">
          提交
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { operateRole } from "@/api/user-center/roleManage.js";
//角色类型
import { getDictList } from "@/api/user-center/organizationManage.js";
export default {
  name: "addModal",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    //操作类型【0 新增  1编辑 】
    operateType: {
      type: Number,
      default: 0,
    },
    //编辑参数
    params: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      loading: false,
      roleTypeLoading: false,
      form: {
        roleName: undefined,
        character: undefined,
        roleIndex: undefined,
        //角色类型
        roleTypeSource: [],
        roleType: undefined,
        mark: undefined,
      },
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
        ],
        character: [
          { required: true, message: "请输入权限字符", trigger: "blur" },
        ],
        roleIndex: [
          { required: true, message: "请输入角色顺序", trigger: "blur" },
        ],
        roleType: [
          { required: true, message: "请输入角色类型", trigger: "change" },
        ],
      },
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getDictList();
          //编辑模式下赋初始值
          if (this.operateType == 1) {
            let { roleName, roleCode, sort, remark, roleType } = this.params;
            this.form.roleName = roleName;
            this.form.character = roleCode;
            this.form.roleIndex = sort;
            this.form.mark = remark;
            this.form.roleType = Number(roleType);
          } else {
            this.form.roleName = undefined;
            this.form.character = undefined;
            this.form.roleIndex = undefined;
            this.form.mark = undefined;
            this.form.roleType = undefined;
          }
        }
      },
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    //提交
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          let { operateType, params } = this;
          let { roleName, character, roleIndex, roleType, mark } = this.form;
          let requestParams = {
            roleName,
            roleCode: character,
            sort: roleIndex,
            roleType,
            remark: mark,
          };
          if (operateType == 1) {
            requestParams.id = params?.id || "";
          }
          operateRole(requestParams)
            .then((res) => {
              this.$message.success("操作成功！");
              this.$parent.getListData();
              this.closeModal();
            })
            .catch((_) => {
              this.$message.error("操作失败，请稍后重试！");
            })
            .finally((_) => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },

    //查询角色类型
    getDictList() {
      this.roleTypeLoading = true;
      return new Promise((resolve, reject) => {
        getDictList({ dictKey: "roleType" })
          .then((res) => {
            let { data } = res;
            this.form.roleTypeSource = data?.result || [];
            resolve();
          })
          .catch((_) => {
            this.form.roleTypeSource = [];
            reject();
          })
          .finally((_) => {
            this.roleTypeLoading = false;
          });
      });
    },

    //关闭弹窗
    closeModal() {
      this.resetForm();
      this.$emit("update:visible", false);
    },

    //重置表单
    resetForm() {
      this.form.roleName = undefined;
      this.form.character = undefined;
      this.form.roleIndex = undefined;
      this.form.mark = undefined;
      this.form.roleType = undefined;
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 20px 60px;
    .ant-form-item {
      .flex();
      .ant-form-item-label {
        flex-shrink: 0;
        width: 80px;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
      }
    }
    .form-footer {
      justify-content: center;
    }
  }
}
</style>
